import {reactive} from 'vue';

export const ThemeController = (() => {
  const STORAGE_KEY = 'doc-theme'
  const state = reactive({
    themeName: window.localStorage.getItem(STORAGE_KEY),
    availableThemes: [
      {name: '', color: '#12b4a5'},
      {name: 'blue', color: '#409EFF'},
      {name: 'violet', color: '#8A2BE2'},
    ],
  })
  return {
    state,
    useTheme: (themeName: string) => {
      console.log('use theme')
      state.themeName = themeName
      window.localStorage.setItem(STORAGE_KEY, themeName)
    },
  }
})();
